<template>
  <div>文章列表</div>
  <el-button type="text" @click="jumpAdd">添加文章</el-button>
  <el-table :data="tableData" stripe style="width: 100%">
    <el-table-column prop="id" label="ID" />
    <el-table-column prop="title" label="标题" />
    <el-table-column prop="author" label="作者" />
    <el-table-column prop="publishTime" label="发布时间" />
    <el-table-column prop="isPublished" label="是否发布">
      <template #default="scope">
        <el-tag v-if="scope.row.isPublished==1">是</el-tag>
        <el-tag v-else type="success">否</el-tag>
      </template>
    </el-table-column>
    <el-table-column label="操作" width="200" align="center">
      <template #default="scope">
        <el-button type="text" @click="handleDetails(scope.row)">查看</el-button>
        <el-button type="text" @click="handleEdit(scope.row)">修改</el-button>
        <el-button type="text" @click="handleRemove(scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
import { list as listArticle, remove as removeArticle} from '@/api/cms/article.service.js'

export default {
  data() {
    return {
      tableData: [
      ],
    }
  },
  created() {
    this.requestData()
  },
  methods: {
    requestData() {
      listArticle({
        pageNum: 1,
        pageSize: 10
      }).then(res=>{
        if(res.data.code ===0) {
          this.tableData = res.data.data.rows
        }
      })
    },
    jumpAdd() {
      this.$router.push({
        path: "/cms/article/add"
      })
    },
    handleDetails(row) {
      this.$router.push({
        path: "/cms/article/details",
        query: {
          id: row.id
        }
      })
    },
    handleEdit(row) {
      this.$router.push({
        path: "/cms/article/edit",
        query: {
          id: row.id
        }
      })
    },
    handleRemove(row) {
      this.$messageBox.alert('是否删除该记录', '警告', {
        confirmButtonText: '确定',
        callback: (action) => {
          if(action === 'confirm') {
            removeArticle([
            row.id
          ]).then(res=>{
            if(res.data.code === 0) {
              this.$message({
                type: 'success',
                message: "删除成功",
              })
              } 
              this.requestData()
            })
          }
        },
      })
    }
  }
}
</script>

<style>

</style>